<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>转入商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>

        <yd-navbar slot="navbar" title="转入商城">
            <a href="javascript:history.back(-1);" slot="left">
                <yd-navbar-back-icon>返回</yd-navbar-back-icon>
            </a>
        </yd-navbar>

        <yd-cell-group>
            <yd-cell-item>
                <span slot="left" style="font-size: 0.3rem;font-weight: 600;">可用：<span style="color:#096db8;">{{balance}}</span></span>
            </yd-cell-item>
            <yd-cell-item class="ox-transfer-lebal">
                <span slot="left" style="font-size: 0.34rem;font-weight: 800;">商城：</span>
            </yd-cell-item>
            <!--yd-cell-item arrow @click.native="showItems = true" type="a" href="javascript:;">
                <span slot="left">{{transMall}}</span>
            </yd-cell-item-->
            <yd-cell-item arrow type="label">
                <select slot="right" v-model="transMall">
                    <option value="请选择商城">请选择商城</option>
                    <option :value="item.token" v-for="item in tokenList">{{item.token}}</option>
                </select>
            </yd-cell-item>
            <yd-cell-item class="ox-transfer-lebal">
                <span slot="left" style="font-size: 0.34rem;font-weight: 800;">数量({{token}})：</span>
            </yd-cell-item>
            <yd-cell-item>
                <input type="text" slot="right" placeholder="请输入金额" v-model="numbers">

                <!-- ↓↓关键代码是这里↓↓ -->
                <yd-sendcode slot="right"
                             type="hollow"
                             init-str="全部"
                             @click.native="tomallAll"
                ></yd-sendcode>
                <!-- ↑↑关键代码是这里↑↑ -->

            </yd-cell-item>
            <yd-cell-item class="ox-transfer-lebal">
                <span slot="right" style="font-size: 0.3rem;font-weight: 600;">手续费：<span style="color:#096db8;">{{numbers*mall_fee/100}}</span>&nbsp;&nbsp;{{token}}</span>
            </yd-cell-item>
            <yd-cell-item class="ox-transfer-lebal">
                <span slot="left" style="font-size: 0.34rem;font-weight: 800;">资金密码：</span>
            </yd-cell-item>
            <yd-cell-item>
                <yd-input slot="right" type="password" placeholder="请输入资金密码" v-model="payPassword"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="ox-transfer-lebal">
                <span slot="left" style="font-size: 0.34rem;font-weight: 800;">手机验证码：</span>
            </yd-cell-item>
            <yd-cell-item>
                <input type="text" slot="right" placeholder="请输入短信验证码" v-model="verCode">

                <!-- ↓↓关键代码是这里↓↓ -->
                <yd-sendcode slot="right"
                             v-model="countDown"
                             @click.native="getVerCode"
                             type="hollow"
                ></yd-sendcode>
                <!-- ↑↑关键代码是这里↑↑ -->

            </yd-cell-item>
        </yd-cell-group>

        <div class="ox-transfer-tip">
            <p>提示</p>
            <p>当每人每天最高转账{{mall_total}}{{token}}，单笔限额为{{mall_low}}-{{mall_high}}{{token}}</p>
            <p>手续费为{{mall_fee}}%</p>
        </div>

        <div class="yd-button">
            <yd-button size="large" type="hollow" class="ox-login-button" @click.native="tomall">确定</yd-button>
        </div>

        <yd-actionsheet :items="myItems" v-model="showItems" cancel="取消"></yd-actionsheet>

    </yd-layout>
</div>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            showItems: false
            ,myItems: [
                {
                    label: 'MDToken',
                    callback: function () {
                        vm.transMall = "MDToken";
                    }
                },
                {
                    label: 'ETH',
                    callback: function () {
                        vm.transMall = "ETH";
                    }
                },
                {
                    label: 'EOS',
                    callback: function () {
                        vm.transMall = "EOS";
                    }
                },
                {
                    label: 'FOC',
                    callback: function () {
                        vm.transMall = "FOC";
                    }
                },
                {
                    label: 'BTC',
                    callback: function () {
                        vm.transMall = "BTC";
                    }
                }
            ]
            ,tokenList:[]
            ,transMall:'请选择商城'
            ,token:''
            ,balance:0.0
            ,numbers:0.0
            ,payPassword:''
            ,verCode:''
            ,countDown:false
            ,mall_fee:0.0
            ,mall_high:0.0
            ,mall_low:0.0
            ,mall_total:0.0
        },
        created:function () {
            this.token = this.getUrlParam('token');
            this.balance = this.getUrlParam('balance');

            $.getJSON(baseURL + "/api/v1/token/list", function(r){
                vm.tokenList = r;
            });

            $.getJSON(baseURL + "/api/v1/fee/transfer", function(r){
                vm.mall_fee = r.mall_fee;
                vm.mall_high = r.mall_high;
                vm.mall_low = r.mall_low;
                vm.mall_total = r.mall_total;
            });
        },
        methods:{
            getUrlParam:function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            },
            tomallAll:function () {
                vm.numbers = vm.balance/(vm.mall_fee/100 + 1);
            },
            getVerCode:function () {
                var pt = this;
                pt.$dialog.loading.open('发送中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/sms/send/sm",
                    data: JSON.stringify({"action":"tomall"}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();

                        if(r.code == 1){
                            pt.countDown = true;
                            pt.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '发送失败',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.message,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            },
            tomall:function () {
                if(vm.transMall == '请选择商城'){
                    this.$dialog.toast({
                        mes: '请选择商城',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                if(!vm.numbers){
                    this.$dialog.toast({
                        mes: '请填写转入数量',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                /*if(parseFloat(vm.numbers) < vm.mall_low){
                    this.$dialog.toast({
                        mes: '单次转入小于最小限制',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                if(parseFloat(vm.numbers) > vm.mall_high){
                    this.$dialog.toast({
                        mes: '转入数量超限',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }*/

                if(!vm.payPassword){
                    this.$dialog.toast({
                        mes: '请输入支付密码',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                if(!vm.verCode){
                    this.$dialog.toast({
                        mes: '验证码不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/^[0-9]+.?[0-9]*$/.test(vm.verCode)){
                    this.$dialog.toast({
                        mes: '验证码格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.verCode.length != 6){
                    this.$dialog.toast({
                        mes: '验证码格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                var pt = this;
                pt.$dialog.loading.open('转入中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/platform-mall",
                    data: JSON.stringify({token:vm.transMall,num:parseFloat(vm.numbers),pw:vm.payPassword,code:vm.verCode}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();

                        if(r.code == 'OK'){
                            pt.$dialog.toast({
                                mes: '转入商城成功',
                                icon: 'success',
                                timeout: 1500,
                                callback:function () {
                                    window.location.href = document.referrer;
                                }
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: r.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>